<script setup>
import {NAvatar, NButton, NFlex, NForm, NFormItem, NSelect, NTabPane, NTabs, useMessage} from "naive-ui";
import api from "@/api";
import {onMounted} from "vue";
import TheIcon from "@/components/icon/TheIcon.vue";

const message = useMessage()
const props = defineProps({
  infoData: {
    type: Object,
    required: true
  }
});
const data = reactive({
  select_customer: {
    name: "未选择",
    card_number: "--",
    user_level_name: "--",
    mobile: "--",
    bi_date: "--",
    sex: "--",
    hkqd: "--",
    age: "--",
    created_at: "--",
    last_come: "--",
    record_hobby: [],
    totals: {
      weimei: 0,
      cdp: 0,
      fujia: 0,
      other: 0,
      buy_money: 0,
      cases: 0,
      appoint_count: 0,
      return_count: 0,
      operation_count: 0,
      face_count: 0,
      test_count: 0,
      having_customers: 0,
      customers_level5: 0

    }
  },
  card_loading: false,
});

const emit = defineEmits(['call-parent'])



onMounted(() => {

})
</script>

<template>
  <NScrollbar style="position:relative;height:calc(100vh - 106px);padding-bottom: 60px">
    <n-spin :show="data.card_loading" style="--n-opacity-spinning:0.1;height: calc(100vh - 225px);">

    </n-spin>
    <div
        style="position: absolute;bottom:0;right:0;width:100%;height:60px;background: #f3f3f3;z-index: 99;display: flex;align-items: center">
      <n-button type="primary" size="large" style="margin-left:10px" @click="">
        <TheIcon icon="material-symbols:save-sharp" :size="18" class="mr-5"/>
        保存分诊
      </n-button>

    </div>
  </NScrollbar>
</template>

<style scoped>
:deep(.n-color-picker-trigger){
  border:0 !important;
}
:deep(.n-slider .n-slider-handles .n-slider-handle-wrapper .n-slider-handle){
  height: 30px;
  width: 30px;
  background:  rgba(103,54,126,1);
  border:0;
}

.time-display {
  margin-bottom: 20px;
  font-size: 16px;
}

/* 自定义滑块样式 */
:deep(.n-slider-rail) {
  background-color: #e0e0e0;
}

:deep(.n-slider-fill) {
  background-color: #4CAF50;
}

:deep(.n-slider-mark) {
  font-size: 12px;
  color: #666;
  top: 20px;
}

:deep(.n-slider-handle) {
  border: 2px solid #4CAF50;
}
.info11 {
  width: 100%;
  padding: 20px;
  display: flex;
  flex-wrap: wrap; /* 子元素自动换行 */

  .data_card2 {
    margin-right: 10px;
    background: #f7f7fa;
    color: #504f4f;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 5px;
    cursor: pointer;

    .con {
      display: flex;
      align-items: center;
      margin-right: 5px;
      font-size: 12px;
      padding: 2px 2px;

      .doctor_avatar {
        width: 20px;
        height: 20px;
        border: 1px solid #fff;
        margin-right: 5px;
      }
    }
  }

  .data_card2_check {
    cursor: pointer;
    margin-right: 10px;
    background: rgba(103, 54, 126, 0.8);;
    color: #fff;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 5px;

    .con {
      display: flex;
      align-items: center;
      margin-right: 5px;
      font-size: 12px;
      padding: 2px 2px;

      .doctor_avatar {
        width: 20px;
        height: 20px;
        border: 1px solid #fff;
        margin-right: 5px;
      }
    }
  }

  .data_card {
    margin-right: 20px;
    background: rgba(200, 115, 115, 0.8);
    color: #fff;
    border-radius: 5px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-width: 100px;
    cursor: pointer;

    .tag {
      font-size: 12px;
      color: #fff;
      font-weight: normal;
      position: absolute;
      left: 2px;
      top: 2px;
      background: #f86c95;
      border-radius: 2px;
      padding: 2px 4px;
    }

    .con {
      line-height: 20px;
      font-size: 16px;
      color: rgba(200, 115, 115, 1);
      padding: 10px;
      margin-top: 20px;
      display: flex;

      .doctor {
        height: 40px;
        display: flex;
        align-items: center;
        margin-right: 10px;
        color: #fff;

        .doctor_avatar {
          width: 30px;
          height: 30px;
          border: 1px solid #fff;
          margin-right: 5px;
        }
      }


    }
  }
}
</style>